<template>
  <div class="m-header">
    <el-row>
      <el-col :span="6">
        <a href="/">
          <span class="logo">前端摆渡人</span>
        </a>
      </el-col>
      <el-col :span="12">
        <ul class="m-nav">
          <li v-for="(item, index) in navData" :key="index">
            <a :href="item.link">{{item.name}}</a>
          </li>
        </ul>
      </el-col>
      <el-col :span="6">
        <div class="search-container">
          <el-input v-model="searchValue" placeholder="请输入内容"></el-input>
          <i class="el-icon-search" @click="search"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data () {
    return {
      navData: [{
        name: "文章存档", 
        link: "/web/article"
      }, {
        name: "关于我", 
        link: "/web/about"
      }, {
        name: "留言", 
        link: "/web/message"
      }],
      searchValue: ''
    }
  },
  methods: {
    search () {
      if (!this.searchValue.length) {
        this.$message.warning('请输入要搜索的内容')
      } else {
        window.location.href = `/search/${this.searchValue}`
      }
    }
  }
}
</script>

<style lang="scss">
  .search-container {
    position: relative;
    i {
      font-size: 20px;
      color: #2085c5;
      padding: 10px;
      z-index: 2;
      position: absolute;
      right: 0;
      top: 10px;
      cursor: pointer;
    }
  }
</style>
